<!DOCTYPE html>
<html class="no-skrollr">
<head>
	<meta charset="utf-8" />

	<title>skrollr test suite</title>

	<link rel="stylesheet" type="text/css" href="qunit.css" />

	<style type="text/css">
	#qunit {
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		height:50%;
		overflow:auto;
		z-index:101;
	}

	#anchor-1, #anchor-2 {
		height:1000px;
		background:#ccc;
		position:absolute;
		top:0;
	}

	#foreign-anchor {
		margin:100px;
		padding:100px;
		background:#ff0;
		position:fixed;
	}

	#relative-percentage-offset {
		top:100%;
	}

	#float {
		position:static !important;
	}

	div {position:absolute;}
	</style>

	<script src="../src/skrollr.js" type="text/javascript"></script>
</head>
<body class="notransition">
	<div id="end" data-start="font-size:10px;" data-end="font-size:90px;">TEST</div>
	<div id="simple-numeric" data-_myconst--300="  	left:-100px; top:0px	" data-_myconst-200-start="  top:50px; 		 left:100px; ">TEST</div>
	<div id="compound-numeric" data-_my500--500="margin:0px 10px 20px 30px;" data-_my500="margin:30px 20px 10px 0px;">TEST</div>
	<div id="rgb-color" data-0="color:rgb(0,0,0);" data-500="color:rgb(50,100,150);">TEST</div>
	<div id="rgba-color" data-0="color:rgba(0,0,0,.2);" data-500="color:rgba(50,100,150,.5);">TEST</div>
	<div id="hsl-color" data-0="color:hsl(0,0%,0%);" data-500="color:hsl(3600,50%,50%);">TEST</div>
	<div id="hsla-color" data-0="color:hsla(0,0%,0%,.0);" data-500="color:hsla(3600,50%,50%,.5);">TEST</div>
	<div id="no-interpolation" data-0="right:!0px;" data-499="right:!100px;">TEST</div>
	<div id="anchor-1" data-top-bottom="right:100px;" data-top="right:0px;">TEST</div>
	<div id="anchor-2" data-top="right:0px;" data-top-center="right:200px;">TEST</div>
	<div id="foreign-anchor" data-top="padding:200px;" data-top-center="padding:100px;" data-anchor-target="#anchor-2"></div>
	<div id="float" data-start="float:none;" data-499="float:left;" style="background:red;">TEST</div>

	<svg version="1.1" width="200px" height="200px">
		<rect
			width="200" height="200" style="fill:#0000ff;fill-rule:evenodd;stroke:none"
			id="svg-relative-mode"
			data-top="margin:100px;" data-top-bottom="margin:200px;" />
	</svg>

	<div id="colon-url" data-250="background-image:!none;" data-499='background-image:!url("https://secure.travis-ci.org/Prinzhorn/skrollr.png");'>TEST</div>
	<div id="period-number" data-250="background-image:!none;" data-499='background-image:!url("https://secure.travis-ci.org/Prinzhorn/skrollr.png?1337");'>TEST</div>

	<div id="easing" data-0="left[half1]:0px;" data-500="left[half1]:50px;">TEST</div>
	<div id="easing_with_easing_strategy" data-0="left[half1]:0px;" data-500="left[half1]:50px;" data-edge-strategy="ease">TEST</div>

	<div id="reset-strategy" data-0="left:0px;" data-500="left:50px;" data-edge-strategy="reset" style="left:1337px;">TEST</div>

	<div id="percentage-offset" data-0="left:0px;" data-200p="left:500px;">TEST</div>

	<div id="relative-percentage-offset" data-0="left:0px;" data--100p-bottom-top="left:500px;">TEST</div>

	<div id="auto-z-index" data-0="z-index:!1;" data-250="z-index:auto;">TEST</div>

	<div id="attr" data-0="@title:500;@data-test:skrollr" data-250="@title:250" data-500="@title:0;@data-test:skrollr-test">TEST</div>

	<div id="qunit"></div>

	<script src="qunit.js" type="text/javascript"></script>
	<script src="qunit-numeric-css-property-equals.js" type="text/javascript"></script>
	<script src="jquery.js" type="text/javascript"></script>
	<!--[if lt IE 9]>
	<script type="text/javascript" src="../src/plugins/skrollr.ie.js"></script>
	<![endif]-->
	<script src="tests.js" type="text/javascript"></script>
</body>
</html>
